import React from 'react'
import('./home.less')
import { Avatar } from 'antd';
import { getDataApi } from '../apis';
import * as echarts from 'echarts'
export default function Home() {
  const baseImgUrl = 'http://xawn.f3322.net:8002/distremote/static/avatar/'
  const { avatar, deptName, roleName, lastLoginTime, username } = JSON.parse(localStorage.userInfo)
  //今日ip
  const[todayIp,setTodayIp]=React.useState(0)
  const[todayVisitCount,setTodayVisitCount]=React.useState(0)
  const [totalVisitCount, setTotalVisitCount] = React.useState(0)
  //获取最近7天的日期
  function getRecentlySevenDays() {
    const now = Date.now()
    const dayMillionseconds = 24 * 60 * 60 * 1000
    const res = []
    for (let i = 0; i < 7; i++) {
      const d = new Date(now - dayMillionseconds * i)
      const mon = d.getMonth() + 1
      const date = d.getDate()
      res.unshift(`${mon}-${date}`)
    }
    return res
  }
  React.useEffect(() => {
    getDataApi(username).then(res => {
      const lastSevenVisitCount = res.data.lastSevenVisitCount
      const yData=[]
      lastSevenVisitCount.forEach((item:{count:number}) => {
        yData.push(item.count)
      });
      let len = yData.length;
      while (len < 7) {
        yData.unshift(0)
        len=yData.length
      }
      
      setTodayIp(res.data.todayIp)
      setTodayVisitCount(res.data.todayVisitCount)
      setTotalVisitCount(res.data.totalVisitCount)
      myCharts.setOption({
        title: {
          text: '近七日访问记录'
        },
        tooltip: {},
        //x 轴
        xAxis: {
          data: xData
        },
        yAxis: {},
        series: [
          {
            name: '访问量',
            type: 'bar',
            data: yData
          }
        ]
      })
    })
    const myCharts = echarts.init(document.getElementById('chart') as HTMLElement)
    const xData=getRecentlySevenDays()
   

   
  },[])
  return (
    <div className='home'>
      <div className="homeHeader">
      <div className="left">
          <div className="leftImg">
          <Avatar shape="square" size={80} src={baseImgUrl+avatar} />
          </div>   
          <div className="leftInfo">
            <p className='hello'>你好，{username}</p>
            <p className='userInfo'>{deptName }| {roleName }</p>
            <p className='loginTime'>上次登录时间：{ lastLoginTime}</p>
          </div>   
      </div>
        <div className="right">
          <div className="rightIp">
            <p className="title">今日IP</p>
            <p className='desc'>{todayIp }</p>
          </div>
          <div className="rightVisit">
            <p className="title">今日访问量</p>
            <p className='desc'>{ todayVisitCount}</p>
          </div>
          <div className="rightTotalVisit">
            <p className="title">总访问量</p>
            <p className='desc'>{totalVisitCount }</p>
          </div>
      </div>
      </div>
      <div className="homeBodyContainer">
      <div className="homeBody" id='chart'>

        </div>
        <div className="bodyRight">
          <img src="http://123.249.11.191:3009/img/bg1.png" alt="" />
        </div>
      </div>
      
    </div>
  )
}
